<template>
  <Panel tite="订单管理">
    <el-form :inline="true">
      <el-form-item label="订单号">
        <el-input
          v-model="searchInfo.orderNo"
          placeholder="请输入订单号"
        ></el-input>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input
          v-model="searchInfo.consignee"
          placeholder="请输入收货人"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input
          v-model="searchInfo.phone"
          placeholder="请数入手机号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="订单状态">
        <el-select v-model="searchInfo.orderState" placeholder="请选择订单状态">
          <el-option label="已受理" value="已受理"></el-option>
          <el-option label="派送中" value="派送中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择时间">
        <el-date-picker
          v-model="searchInfo.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="orderList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column label="订单号" prop="orderNo"></el-table-column>
      <el-table-column label="收货人" prop="consignee"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="订单状态" prop="orderState"></el-table-column>
      <el-table-column label="创建时间" prop="orderTime">
        <template slot-scope="scope">
          {{ scope.row.orderTime | formaDate }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="changeSize"
      @current-change="pageChange"
      :current-page="pageinfo.currentPage"
      :page-sizes="[5, 8, 14, 20]"
      :page-size="pageinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </Panel>
</template>

<script>
import { orderListReq } from "@/api/order.api.js";

import dayjs, { isDayjs } from "dayjs";

import { clearObject } from "@/utlis/commom.js";
export default {
  data() {
    return {
      pageinfo: {
        currentPage: 1,
        pageSize: 8,
      },
      searchInfo: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: "",
      },
      total: 0,
      list: [],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  // 日期转换
  filters: {
    formaDate(val) {
      return dayjs(val).format("YYYY/MM/DD HH:mm:ss");
    },
  },

  methods: {
    // 点击查询事件
    async orderList() {
      const params = { ...this.pageinfo, ...this.searchInfo };

      console.log(this.searchInfo.date);
      // 数据清洗
      clearObject(params);
      // 把时间转换成JSON 字符串
      if (params.date) {
        params.date = JSON.stringify(
          params.date.map((item) => dayjs(item).format("YYYY/MM/DD HH:mm:ss"))
        );
      }
      const res = await orderListReq(params);
      console.log(res);
      this.list = res.data.data;
      this.total = res.data.total;
    },

    //每页条数发生改变
    changeSize(size) {
      console.log(size);

      this.pageinfo.pageSize = size;

      this.orderList();
    },

    // 改变页码
    pageChange(currentPage) {
      this.pageinfo.currentPage = currentPage;
      // 重新刷新页面
      this.orderList();
    },
  },

  created() {
    this.orderList();
  },
};
</script>

<style lang="less" scoped>
</style>